<template>
  <div>
    <el-row>
      <s-table
        ref="multipleTable"
        v-loading="false"
        :column="tableData.column"
        :data="tableData.data"
        :header-cell-class-name="headerCellClass"
        pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10,20,30,50]"
        :current-page.sync="dataObjects.current"
        :total="dataObjects.total"
        :page-size="dataObjects.size"
        @select="handleSelectionChange"
        @size-change="handleSizeChange"
        @p-current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
import sTable from '@/components/STable/s-table'
export default {
  components: {
    sTable
  },
  props: {
    dataObjects: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 多选根据条件禁用
      selectType: -1,
      // 表单选择的内容
      multipleSelection: [],
      tableQuery: {
        pageSize: 10,
        page: 1
      },
      // 单列表单
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: {
        column: [
          {
            type: 'selection',
            width: '54',
            label: '主部门',
            align: 'center',
            headerAlign: 'center',
            fixed: true,
            selectable: (row, index) => {
              if (row.classifyId == this.selectType || this.selectType == -1) {
                return true
              } else {
                return false
              }
            }
          },
          {
            prop: 'code',
            label: '合同编号',
            width: '200'
          },
          {
            prop: 'name',
            label: '合同名称',
            width: '200'
          },
          {
            prop: 'partyAName',
            label: '甲方单位',
            width: '260',
            render: (h, scope) => {
              if (scope.row.serchAFlag) {
                return (
                  <div>
                    <a
                      style='display: block; color: #ceab70;text-decoration-line: underline;'
                      class='samples-table-overflow'
                      onClick={() => {
                        this.$router.push({
                          path: '/CRM/customerPrivateManageDetail',
                          query: { id: scope.row.partyAId }
                        })
                      }}
                    >
                      {scope.row.partyAName}
                    </a>
                  </div>
                )
              } else {
                return (
                  <span> {scope.row.partyAName} </span>
                )
              }
            }
          },
          {
            prop: 'partyBName',
            label: '乙方单位',
            width: '260',
            render: (h, scope) => {
              if (scope.row.serchBFlag) {
                return (
                  <div>
                    <a
                      style='display: block; color: #ceab70;text-decoration-line: underline;'
                      class='samples-table-overflow'
                      onClick={() => {
                        this.$router.push({
                          path: '/CRM/customerPrivateManageDetail',
                          query: { id: scope.row.partyBId }
                        })
                      }}
                    >
                      {scope.row.partyBName}
                    </a>
                  </div>
                )
              } else {
                return (
                  <span> {scope.row.partyBName} </span>
                )
              }
            }
          },
          {
            prop: 'amount',
            label: '金额',
            align: 'right',
            width: '125',
            render: (h, scope) => {
              const num = (Number(scope.row.amount).toFixed(2) + '').replace(
                /\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,
                '$&,'
              )
              return <span>{num}</span>
            }
          },
          {
            prop: 'signedTime',
            label: '签订日期',
            width: '140'
          },
          {
            prop: 'typeName',
            label: '合同类型',
            width: '140'
          }
        ],
        data: [],
        options: {
          boundariesElement: 'scrollParent'
        }
      }
    }
  },

  computed: {},
  watch: {
    dataObjects: {
      handler: function(val, oldval) {
        console.log('父组件传过来的值', val)
        if (val != oldval) {
          this.getData()
        }
      },
      immediate: true, // 关键
      deep: true
    }
  },
  mounted() {
    if (document.addEventListener) {
      // firefox
      document.addEventListener(
        'DOMMouseScroll',
        function() {
          console.log('wheel')
          document.querySelector('#app').click()
        },
        false
      )
    }
    // 滚动滑轮触发scrollFunc方法  //ie 谷歌
    // window.onmousewheel = document.onmousewheel = function() {
    //   console.log('wheel')
    //   document.querySelector('#app').click()
    // }
  },

  methods: {
    tablecellStyle({ row, column, rowIndex, columnIndex }) {
      // console.log(column)
      if (column.type === 'default') {
        return { 'padding-left': '20px' }
      }
      if (column.type === 'index') {
        return { 'padding-left': '20px' }
      }
    },
    headerCellClass({ row, column, rowIndex, columnIndex }) {
      if (column.type === 'index') {
        return 'indexTableHeaderStyle'
      } else if (column.type === 'selection') {
        if (columnIndex == 0) {
          return 'DisplaySelection_contract_selectTable'
          // return ''
        } else {
          return ''
        }
      } else {
        return 'samples-header-cell'
      }
    },
    getData() {
      this.tableData.data = []
      this.tableData.data = this.dataObjects.records
    },
    //     // 多选操作
    // handleSelectionChange(val) {
    //   val.length > 0 ? (this.selectType = val[0].type) : (this.selectType = -1)
    //   this.multipleSelection = val
    // },
    handleSelectionChange(selection, val) {
      console.log('selection', selection, 'val', val)
      if (val.typeName == '收入合同') {
        this.multipleSelection = []
        this.$refs.multipleTable.clearSelection()
        this.$refs.multipleTable.toggleRowSelection(val, true)
        this.multipleSelection = val
      } else {
        selection.length > 0 ? (this.selectType = val.classifyId) : (this.selectType = -1)
        // this.multipleSelection = val
        this.multipleSelection = selection
      }

      console.log('这是选择的内容', this.multipleSelection)
      this.$emit('childSay', this.multipleSelection)
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSizeChange(val) {
      this.tableQuery.pageSize = val
      this.tableQuery.page = 1
      this.$emit('sonTableQuery', this.tableQuery)
    },
    handleCurrentChange(val) {
      this.tableQuery.page = val
      this.$emit('sonTableQuery', this.tableQuery)
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
